<template>
  <Card class="!mt-10px">
    <Button type="primary" :disabled="!categoryStore.category3Id" @click="showSpu()">
      <template #icon><PlusOutlined /></template>
      添加SPU
    </Button>

    <Table
      class="mt-15px"
      :columns="columns"
      :data-source="spuList"
      bordered
      :pagination="{
        current, // 当前页码
        pageSize, // 每页条数
        total, // 总数
        pageSizeOptions: ['3', '6', '9', '12'], // 指定每页可以显示多少条
        position: ['bottomCenter'], // 分页器显示位置
        showQuickJumper: true, // 是否可以快速跳转至某页
        showSizeChanger: true, // 是否可以改变 pageSize
        showTotal: (total) => `总共 ${total} 条`, // 用于显示数据总量和当前数据顺序
        onChange: getSpuList, // 当前页码发生变化触发的回调
        onShowSizeChange: getSpuList, // 每页条数发生变化触发的回调
      }"
      rowKey="id"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, index, record }">
        <template v-if="column.dataIndex === 'id'">
          {{ index + 1 }}
        </template>

        <template v-if="column.dataIndex === 'operator'">
          <Button
            class="!text-blue-500 !border-blue-500 hover:(!text-blue-300 !border-blue-300) mr-10px"
            @click="showSaveSku"
          >
            <template #icon><PlusOutlined /></template>
          </Button>
          <Button
            class="
              !text-orange-500
              !border-orange-500
              hover:(!text-orange-300
              !border-orange-300)
              mr-10px
            "
            @click="showSpu(record)"
          >
            <template #icon><EditOutlined /></template>
          </Button>
          <Button
            class="!text-gray-500 !border-gray-500 hover:(!text-gray-300 !border-gray-300) mr-10px"
          >
            <template #icon><InfoOutlined /></template>
          </Button>
          <Popconfirm
            :title="`您确认要删除 ${record.spuName} 数据吗？`"
            @confirm="removeSpu(record.id)"
          >
            <template #icon><QuestionCircleOutlined style="color: red" /></template>
            <Button danger>
              <template #icon><DeleteOutlined /></template>
            </Button>
          </Popconfirm>
        </template>
      </template>
    </Table>
  </Card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'SpuList',
  });
</script>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Card, Button, Table, Popconfirm, message } from 'ant-design-vue';
  import {
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    InfoOutlined,
    QuestionCircleOutlined,
  } from '@ant-design/icons-vue';
  import { useCategoryStore } from '/@/store/modules/category';
  import { getSpuListApi, removeSpuApi } from '/@/api/product/spu';
  import type { SpuListModel, SpuModel } from '/@/api/product/model/spuModel';

  const emit = defineEmits(['setIsShow', 'setSpu']);

  const showSaveSku = () => {
    emit('setIsShow', 3);
  };

  const showSpu = (
    record: SpuModel = {
      spuName: '',
      description: '',
      tmId: undefined,
      spuSaleAttrList: [],
      spuImageList: [],
    },
  ) => {
    emit('setIsShow', 2);
    emit('setSpu', record);
  };

  const categoryStore = useCategoryStore();

  const columns = [
    {
      title: '序号', // 列头的标题
      dataIndex: 'id', // 渲染data中哪个数据
      width: 80, // 宽度
      align: 'center', // 居中
    },
    {
      title: 'Spu名称',
      dataIndex: 'spuName',
    },
    {
      title: 'Spu描述',
      dataIndex: 'description',
    },
    {
      title: '操作',
      dataIndex: 'operator',
      width: 300,
    },
  ];

  const spuList = ref<SpuListModel>([]);
  const current = ref(1);
  const pageSize = ref(3);
  const total = ref(0);
  const tableLoading = ref(false);

  const getSpuList = async (page: number, limit: number) => {
    tableLoading.value = true;
    const res = await getSpuListApi({
      page,
      limit,
      category3Id: categoryStore.category3Id as number,
    });
    current.value = page;
    pageSize.value = limit;
    spuList.value = res.records;
    total.value = res.total;
    tableLoading.value = false;
  };

  watch(
    () => categoryStore.category3Id,
    (category3Id) => {
      if (!category3Id) {
        spuList.value = [];
        current.value = 1;
        pageSize.value = 3;
        total.value = 0;
        return;
      }
      // 发送请求，获取数据展示
      getSpuList(current.value, pageSize.value);
    },
    { immediate: true },
  );

  // 删除Spu
  const removeSpu = async (id: number) => {
    await removeSpuApi(id);
    message.success('删除Spu成功');
    getSpuList(current.value, pageSize.value);
  };
</script>
